// import './index.scss';
import { MciCard, MciLabel } from '@/components/base';
import { DecisionFilter } from './components/DecisionFilter';
import { DecisionSum } from './components/DecisionSum';
import { DecisionMap } from './components/DecisionMap';
// import  DecisionMap  from './components/DecisionMap/index.vue';
import DecisionTable from './components/DecisionTable';
import MicroAmountChart from './components/Charts/MicroAmountChart';
// import PipeChart from './components/Charts/PipeChart';
import { getFlowResultSummaryByCity } from '@/api';
// import { update } from 'lodash-es';

export default defineComponent(() => {
  const flowId = ref('');
  const dataSource = ref<any[]>([]);

  const initData = async (flowId: string) => {
    let data = await getFlowResultSummaryByCity({ flowIds: flowId });
    dataSource.value = data || [];
  };

  watch(
    () => flowId.value,
    (newFlowId) => {
      if (newFlowId) {
        initData(newFlowId);
      }
    },
    { deep: true }
  );

  return () => {
    return (
      <div class="w-full flex justify-center">
        <div class="w-4/5 max-w-1400 min-w-1000">
          <MciCard class="w-full">
            <div class="w-full flex justify-between">
              <MciLabel class="py-5"> 平台数据展示 </MciLabel>
              <div class="grow min-w-300px flex justify-end" style={{ width: '32.8%' }}>
                <DecisionFilter
                  onRefreshList={(data: string) => {
                    flowId.value = data;
                  }}
                />
              </div>
            </div>
            <div>
              <DecisionSum flowId={flowId.value} />
            </div>
            <MciLabel class="py-16"> 决策数据地理分布 </MciLabel>
            
            <div class="w-full flex justify-between gap-16">
              <DecisionMap class="w-1/2" flowId={flowId.value} dataSource={dataSource.value} />
              <DecisionTable flowId={flowId.value} dataSource={dataSource.value} />
            </div>
            <MciLabel class="py-16"> 决策审批状态分布 </MciLabel>
            <MicroAmountChart flowId={flowId.value} />
            {/* 需求需要，暂时隐藏 */}
            {/* <div class="flex justify-between gap-16">
              <div class="grow">
                <MciLabel class="py-16"> 黑名单审核 </MciLabel>
                <PipeChart title={'标题'} label={'名称'} data={testData} />
              </div>
              <div class="grow">
                <MciLabel class="py-16"> 反欺诈 </MciLabel>
                <PipeChart title={'标题'} label={'名称'} data={testData} />
              </div>
            </div> */}
          </MciCard>
          <div class="h-24"></div>
        </div>
      </div>
    );
  };
});
